<template>
  <view class="container">
    <!-- 修改为原生image标签 -->
    <image src="/static/bg.jpg" mode="aspectFill" class="bg-image" />
    <uv-text text="校园服务" size="3rem" color="#fff" align="center" class="title" customStyle=""></uv-text>
    <view class="container-form">
      <uv-form labelPosition="left" ref="loginFormRef" :model="loginForm" :rules="rules" labelWidth="auto">
        <uv-form-item prop="phone" borderBottom>
          <uv-input prefixIcon="account-fill" placeholderStyle="color: #fff;margin-left:2rem" v-model="loginForm.phone"
            placeholder="请输入手机号码" border="none">
          </uv-input>
        </uv-form-item>
        <uv-form-item prop="password" borderBottom>
          <uv-input prefixIcon="lock-fill" placeholderStyle="color: #fff;margin-left:2rem" v-model="loginForm.password"
            type="password" placeholder="请输入密码" border="none">
          </uv-input>
        </uv-form-item>
        <uv-button type="info" text="登录" :loading="loading" loadingText="登录中" @click="handleLogin" class="button" />
        <uv-button type="primary" text="注册" customStyle="margin-top: 10rpx" @click="navToRegister" />
      </uv-form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { LoginReq } from '@/api/login/type'
import store from '@/store'
import { toast } from '@/utils/common'

const loginForm = reactive<LoginReq>({
  phone: '13966751204',
  password: '123456'
})
const rules = ref({
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})
const loading = ref<boolean>(false)
const loginFormRef = ref(null);

const handleLogin = async () => {
  // 登录逻辑
  const vaild: boolean = await loginFormRef.value.validate();
  if (!vaild) return;
  loading.value = true;
  try {
    await store.dispatch('Login', loginForm)
    await store.dispatch('GetInfo')
    uni.switchTab({
      url: '/pages/index/index'
    })
  } catch (error) {
    toast(error.tips)
  } finally {
    loading.value = false;
  }
}

const navToRegister = () => {
  uni.navigateTo({
    url: '/pages/login/register'
  })
}
</script>

<style lang="scss" scoped>
.container {
  position: relative; // 新增定位上下文
  height: 100vh;
  width: 100%;
  overflow: hidden;

  .bg-image {
    // 新增图片样式
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .title {
    position: relative; // 确保文字在图片上方
    z-index: 1;
    margin-top: 20% !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
  }

  .container-form {
    position: relative; // 确保表单在图片上方
    z-index: 1;
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
    margin-top: 35%;
    background-color: rgb(227 222 222 / 50%);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    ::v-deep .uni-input-input {
      margin-left: 2rem;
    }

    .button {
      margin-top: 10rpx;
    }
  }
}
</style>